<template>
	<div class="main_box" style="padding-right:10px">
		<el-card class="header-card">
			<div slot="header">
				<div class="header">
					<div style="display: flex;align-items: center">
						<i @click="handleReturnList" class="el-icon-arrow-left"></i>
						<div class="separater">|</div>
						<div class="title">用户地图</div>
					</div>
					<div>
						<el-select v-model="userIndex" placeholder="请选择用户" @change="handleSelectUserChange">
							<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
							</el-option>
						</el-select>
					</div>
				</div>
			</div>
			<div class="map">
				<UserMap :center-props="center" :equip-ids="equipIds" @userInfos="handleUserOptions" />
			</div>
		</el-card>
	</div>
</template>

<script>
import UserMap from "@/components/UserMap.vue";
export default {
	name: "WatchManagement",
	components: { UserMap },
	data() {
		return {
			userIndex: '',
			center: undefined,
			options: [],
			equipIds: this.$route.query.hasOwnProperty("equipIds") ? this.$route.query.equipIds : undefined,
		}
	},
	mounted() {
	},
	methods: {
		/**
		 * 返回列表
		 */
		handleReturnList() {
			this.$store.dispatch("delView", this.$route);
			this.$router.back()
		},
		/**
		 * 处理用户列表
		 */
		handleUserOptions(user, equipId) {
			this.options = user.map((c, index) => { return { ...c, value: index, label: c.name || c.equipName } })
			this.userIndex = this.options.findIndex((e) => e.currentInfo.equipId === equipId);
		},
		/**
		 * 选择用户
		 */
		handleSelectUserChange() {
			const userInfo = this.options.find((c, index) => index === this.userIndex);
			if (userInfo && !userInfo.currentInfo.latitude && !userInfo.currentInfo.longitude) {
				this.$Utils.notifyWarn("该用户没有位置信息!")
			} else {
				this.center = { lng: userInfo.currentInfo.longitude, lat: userInfo.currentInfo.latitude }
			}
		}
	}
}
</script>

<style lang="scss" scoped>
@import "@/assets/css/views/detailType.scss";

.map {
	width: 100%;
}

.header {
	width: 100%;
	display: flex;
	justify-content: space-between;
}
</style>

